﻿<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>活动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title"/>
    <meta name="msapplication-TileColor" content="#090a0a">
    <link rel="icon" type="image/png" href="#/static/assets/i/favicon.png">
    <link rel="stylesheet" href="__ROOT__/static/home/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__ROOT__/static/home/assets/css/app.css"/>
    <link rel="stylesheet" href="__ROOT__/static/plugins/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="__ROOT__/static/home/css/css_style.css">
    <script type="text/javascript" src="__ROOT__/static/plugins/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="__ROOT__/static/plugins/lazyload/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="__ROOT__/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="__ROOT__/static/plugins/layer.mobile-v2.0/layer_mobile/layer.js"></script>
</head>
<body class="grayBy">
<div class="search_community_header">
    <a href="{:url('home/Community/index')}"><span class="category_community"><img style="width: 10px;height: 20px;" src="__ROOT__/static/home/css/myorder/images/back.png"/></span></a>
    <span class="search_community">活动</span>
    <i class="search_community_icon"></i>
</div>
{volist name='list' id='vo'}
<ul class="foot_list_a">
    <li>
        <div>
            <p>{$vo.active_title}</p>
            <p><span>活动发布时间：<span class="foot_time">{:date('Y-m-d H:i',$vo.create_time)}</span></span></p>
            <img style="width: 100%" class="lazy" data-original="__ROOT__{$vo.active_imgs_url}" src="__ROOT__/static/plugins/lazyload/grey.gif" alt="暂无图片" />
            <p class="foot_content"><pre>{$vo.active_content}</pre></p>
        </div>
        <div class="addr_op" id="myDiv" style="margin-top: 10px;">
            <span style="color: green;">活动开始时间：</span><span>{:date('Y-m-d H:i',$vo.start_time)}</span>
            <br/>
            <span style="color: red;">活动结束时间：</span><span>{:date('Y-m-d H:i',$vo.over_time)}</span>
            <div>
                <span>参与人数：</span><span>{$vo.active_num}</span>
                <div style="height: 60px;">
                    {if condition="$vo.start_time > time()"}
                    <button type="button" style="margin-top: 10px;" class="btn btn-primary" onclick="add({$vo.id})">点击参与活动</button>
                    {elseif condition="$vo.start_time < time() && $vo.over_time > time()" /}
                    <button type="button" style="margin-top: 10px;" class="btn btn-danger">活动已开始不能参与</button>
                    {/if}
                    <em class="del">
                        {if condition="$vo.start_time > time()"}
                        <span style="margin-left: -60px;color: #0C0C0C;">倒计时&nbsp;</span>
                        <span class="time" style="color: darkviolet;">
                        </span>
                        <br/>
                        <span style="color: blue;">活动即将开始</span>
                        {elseif condition="$vo.start_time < time() && $vo.over_time > time()" /}
                        <span style="color: green;">活动进行中...</span>
                        {elseif condition="$vo.over_time < time()"/}
                        <span style="color: red;">已结束</span>
                        {/if}
                    </em>
                    <input type="hidden" class="time_diff" value="{$time = $vo.start_time - time()}"/>
                    <input type="hidden" class="start_time" value="{$vo.start_time}"/>
                    <input type="hidden" class="over_time" value="{$vo.over_time}"/>
                </div>
            </div>
        </div>
    </li>
</ul>
{/volist}
<div style="height: 70px;"></div>
<div class="footer_fixed clearfix">
    <span><a href="{:url('home/Community/index')}"><i class="home_community_icon"></i><b>社区</b></a></span>
    <span><a href="{:url('home/Babyhome/index')}"><i class="customer_community_icon"></i><b>专题</b></a></span>
    <span><a href="{:url('home/Parenting/index')}"><i class="store_community_icon"></i><b>育儿</b></a></span>
    <span><a href="{:url('home/Activity/index')}" class="aon"><i class="carts_community_icon"></i><b>活动</b></a></span>
</div>
</body>
</html>
<script>
    /*图片懒加载*/
    $(function() {
        $("img.lazy").lazyload({effect: "fadeIn"});
    });

    /*输出活动时间倒计时 活动开始刷新页面 活动结束刷新页面*/
    var time_diff = $('.time_diff').val();
    var start_time = $('.start_time').val();
    var over_time = $('.over_time').val();
    var num = over_time - start_time;
    function fun(n){
        if(n>0){
            n--;
            var time = n;
            var days = Math.floor(time / 1440 / 60);
            var hours = Math.floor((time - days * 1440 * 60) / 3600);
            var minutes = Math.floor((time - days * 1440 * 60 - hours * 3600) / 60);
            var seconds = (time - days * 1440 * 60 - hours * 3600 - minutes *60);
            $('.time').html(days+"日"+hours+"时"+minutes +"分"+seconds+"秒");
            setTimeout("fun("+n+")",1000);
        }else if(n == 0){
            window.location.reload();
        }else {
            var n1 = Math.abs(n) + 1;
            fun1(n);
            setTimeout("fun("+-n1+")",1000);
        }
    }
    (function(){
        setTimeout("fun(time_diff)",1000)
    }());

    /*活动结束刷新页面*/
    function fun1(n){
        var n2 = num - Math.abs(n);
        if(n2 == 0){
            window.location.reload();
        }
    }

    /*活动参与人数增加*/
    function add(id){
        var obj = {};
        obj.id = id;
        layer.open({
            content: '确定参与吗？'
            ,btn: ['确定', '取消']
            ,skin: 'footer'
            ,yes: function(){
                $.post("{:url('home/Activity/addNum')}", obj, function(data){
                    if(data == 1){
                        layer.open({
                            content: '参与成功！'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                        setTimeout('window.location.reload()', 1000);
                    }else {
                        layer.open({
                            content: '参与失败！'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }
                });
            }
        });
    }
</script>